<template>
  <div>
    <el-card>
      <el-tabs v-model='activeName' type='card' @tab-click='handleClick'>
        <el-tab-pane label='设备排名' name='first'>
          <el-form ref='searchForm' :model='form' label-width='80px'>
            <div class='formtop'>
              <el-form-item
                label-width='auto'
                label='日期选择'
                :rules="[{ required: true, message: '请选择日期' }]"
              >
                <el-radio-group v-model='form.type'>
                  <el-radio label='1'>昨日</el-radio>
                  <el-radio label='2'>上周</el-radio>
                  <el-radio label='3'>上月</el-radio>
                  <el-radio label='4'>上季度</el-radio>
                  <el-radio label='5'>上年</el-radio>
                  <el-radio label='6'>自定义</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button
                  type='primary'
                  size='mini'
                  @click='search'
                >查询
                </el-button>
              </el-form-item>
            </div>
            <div v-if='form.type == 6' class='formtop'>
              <el-form-item
                label='开始日期'
                prop='start_time'
                format='yyyy 年 MM 月 dd 日'
                label-width='auto'
                :rules="
                  form.type !== '6'
                    ? [{ required: false }]
                    : [{ required: true, message: '开始日期不能为空' }]
                "
              >
                <el-date-picker
                  v-model='form.start_time'
                  type='date'
                  placeholder='选择日期'
                  style='width: 100%'
                  value-format='yyyy-MM-dd'
                  :picker-options='pickerOptions'
                />
              </el-form-item>
              <el-form-item
                label-width='auto'
                label='结束日期'
                prop='end_time'
                :rules="
                  form.type !== '6'
                    ? [{ required: false }]
                    : [{ required: true, message: '结束日期不能为空' }]
                "
              >
                <el-date-picker
                  v-model='form.end_time'
                  type='date'
                  placeholder='选择日期'
                  value-format='yyyy-MM-dd'
                  style='width: 100%'
                  :picker-options='pickerOptions'
                />
              </el-form-item>
            </div>
            <!-- <div class="formtop">
              <el-form-item label="选择对象">
                <div style="display: flex; align-items: center">
                  <div
                    v-for="(item, index) in nowTreeArr"
                    :key="item.id"
                    class="myCheck"
                    name="type"
                    @click="deleteType(item, index)"
                  >
                    {{ item.name }}
                    <i class="el-icon-circle-close" />
                  </div>
                </div>
              </el-form-item>
            </div> -->
          </el-form>
        </el-tab-pane>
        <el-tab-pane label='时段排名' name='second'>
          <el-form
            ref='formAnalogy'
            :model='formAnalogy'
            label-width='80px'
            size='mini'
          >
            <div class='formtop'>
              <el-form-item
                label='开始日期'
                prop='start_time'
                format='yyyy 年 MM 月 dd 日'
                label-width='auto'
                :rules="
                  formAnalogy.type !== '6'
                    ? [{ required: false }]
                    : [{ required: true, message: '开始日期不能为空' }]
                "
              >
                <el-date-picker
                  v-model='formAnalogy.start_time'
                  type='date'
                  placeholder='选择日期'
                  style='width: 100%'
                  value-format='yyyy-MM-dd'
                  :picker-options='pickerOptions'
                />
              </el-form-item>
              <el-form-item
                label-width='auto'
                label='结束日期'
                prop='end_time'
                :rules="
                  formAnalogy.type !== '6'
                    ? [{ required: false }]
                    : [{ required: true, message: '结束日期不能为空' }]
                "
              >
                <el-date-picker
                  v-model='formAnalogy.end_time'
                  type='date'
                  placeholder='选择日期'
                  value-format='yyyy-MM-dd'
                  style='width: 100%'
                  :picker-options='pickerOptions'
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type='primary'
                  size='mini'
                  @click='search2'
                >查询
                </el-button>
              </el-form-item>
            </div>
            <div v-if="formAnalogy.type === '5'" class='formtop'>
              <el-form-item
                label='数据周期'
                :rules="
                  formAnalogy.type === '5'
                    ? [{ required: true, message: '请选择周期' }]
                    : [{ required: false }]
                "
              >
                <el-radio-group v-model='formAnalogy.period_type'>
                  <el-radio label='day'>日</el-radio>
                  <el-radio label='month'>月</el-radio>
                  <el-radio label='year'>年</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label='基准日期'>
                <el-date-picker
                  v-model='formAnalogy.day_time'
                  type='date'
                  placeholder='选择日期'
                  style='width: 100%'
                />
              </el-form-item>
            </div>
            <div v-if="activeName === 'second'" class='formtop'>
              <el-form-item label='选择对象'>
                <div style='display: flex; align-items: center'>
                  <div
                    v-for='(item, index) in nowTreeArr'
                    :key='item.id'
                    class='myCheck'
                    name='type'
                    @click='deleteType(item, index)'
                  >
                    {{ item.name }}
                    <i class='el-icon-circle-close' />
                  </div>
                </div>
              </el-form-item>
            </div>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <el-divider />
        <div id='dataAnalysis' />
    </el-card>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import commMix from './commonMix.js'
import { getRanking } from '@/api/efficiencyAnalysisApi.js'

export default {
  name: 'electricityComparisonChild',
  components: {},
  mixins: [commMix],
  props: {
    choseData: {
      type: Object,
      default: () => {
      },
    },

  },
  data() {
    return {
      echartsData: '',
      activeName: 'first',
      form: {
        monitor_id: [],
        station_id: '',
        type: '1',
        start_time: '',
        end_time: '',
        search_type: 1,
      },
      formAnalogy: {
        type: '6',
        start_time: '',
        end_time: '',
        monitor_id: [],
        search_type: 2,
      },
      nowTree: {},
      nowTreeArr: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
    }
  },
  watch: {
    choseData: {
      // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function(newV, oldV) {
        if (this.activeName === 'second' || this.activeName === 'first') {
          if (
            this.nowTreeArr.length > 0 &&
            newV.site_id !== this.nowTreeArr[0].site_id
          ) {
            this.$message.error('禁止跨站点选择')
            return
          }
          if (this.nowTreeArr.length === 5) {
            this.$message.error('最多选择5个回路')
            return
          }
          for (var i = 0; i < this.nowTreeArr.length; i++) {
            if (newV.id === this.nowTreeArr[i].id) {
              return
            }
            // 去重
          }
          this.nowTreeArr.push(newV)
          if (this.activeName === 'first') {
            this.form.start_time = this.getNowTime()
            this.form.end_time = this.getNowTime()
            this.formAnalogy.start_time = this.getNowTime()
            this.formAnalogy.end_time = this.getNowTime()
            this.search()
          } else {
            this.search2()
          }
        }
      },
    },
    activeName: {
      // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function(newV, oldV) {
        this.echartsData = ''
        if (newV === 'first') {
          this.search()
        } else {
          if (this.nowTreeArr.length === 1) {
            this.$message({
              showClose: true,
              message: '请选择两个支路',
              type: 'success',
            })
          } else {
            this.search2()
          }
        }
      },
    },
  },
  mounted() {
  },

  methods: {
    search() {
      // console.log(123)
      this.$refs['searchForm'].validate((valid) => {
        console.log(valid)
        if (valid) {
          console.log('search')
          if (this.nowTreeArr.length === 0) {
            this.$message({
              showClose: true,
              message: '请选择分支',
              type: 'error',
            })
            return
          }
          this.form.monitor_id = []
          for (var i = 0; i < this.nowTreeArr.length; i++) {
            console.log(this.nowTreeArr[i])
            this.form.monitor_id.push(this.nowTreeArr[i].id)
          }
          this.form.station_id = this.choseData.site_id
          this.form.monitor_type = 5
          getRanking(this.form).then((res) => {
            console.log(res)
            this.echartsData = res.data
            this.setDataAnalysis(res.data)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 能耗类比
    search2() {
      this.$refs['formAnalogy'].validate((valid) => {
        console.log(valid)
        if (valid) {
          if (this.nowTreeArr.length === 0) {
            this.$message({
              showClose: true,
              message: '请选择分支',
              type: 'error',
            })
            return
          }
          this.formAnalogy.monitor_id = []
          for (var i = 0; i < this.nowTreeArr.length; i++) {
            console.log(this.nowTreeArr[i])
            this.formAnalogy.monitor_id.push(this.nowTreeArr[i].id)
          }
          console.log(this.formAnalogy)
          this.form.station_id = this.choseData.site_id

          getRanking(this.formAnalogy).then((res) => {
            console.log(res)
            this.echartsData = res.data
            this.setDataAnalysis(res.data)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClick(tab, event) {
      console.log(tab, event)
      echarts.dispose(document.getElementById('dataAnalysis'))
    },
    setDataAnalysis(obj) {
      echarts.dispose(document.getElementById('dataAnalysis'))
      var myChart = echarts.init(document.getElementById('dataAnalysis'))
      var option = {
        title: {
          text: '能耗排名top10',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: 'category',
          data: obj.yData,
        },
        series: obj.series,
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
  },
}
</script>

<style lang='scss' scoped>
::v-deep .tableHead {
  background-color: #edf1f8 !important;
}

.formtop {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.min_box {
  width: 100%;
  height: 70vh;
}

#dataAnalysis {
  width: 100%;
  height: 35vh;
}

.bottom_box {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  & > div {
    width: 45%;
    height: 34vh;
  }
}

::v-deep .is-required {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.myCheck {
  padding: 0 30px 0 20px;
  border: 1px solid #c6c6c6;
  border-radius: 10px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;

  i {
    color: #c6c6c6;
    font-size: 25px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

::v-deep .is-required {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
</style>
